<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" :autoBack="true"></u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs lineWidth="30" lineColor="#4E9B52" @change="tabsChange" :list="tablist" :current="currentIndex"></u-tabs>
		</u-sticky>
		<view v-show="currentIndex==0">
			<view v-if="packagelist.length<=0" style="margin-top: 200rpx;">
				<u-empty text="暂无卡券" mode="history"></u-empty>
			</view>
			<view v-else style="padding-bottom: 200rpx;">
				<view v-for="(item,index) in packagelist" :key="index" class="margin-sm padding-sm bg-white radius">
					<view class="flex align-start justify-between  ">
						<view>
							<view :class="item.State==1?'text-gray':'text-black'" class="text-lg  text-bold">
								{{item.dyProductInfo.productName}}
							</view>
							<view :class="item.State==1?'text-gray':''" class="text-sm margin-top-sm">
								适用包型：{{item.dyProductInfo.roomType}}</view>
							<!-- <view :class="item.State==1?'text-gray':''" class="text-sm ">
								有效期至：{{item.TermOfValidity?item.TermOfValidity:'无限制'}}</view> -->
							<!-- <view :class="item.State==1?'text-gray':''" class="text-sm ">购买日期：{{item.CreateTime}}</view> -->
						</view>
						<view class="flex flex-direction" style="160rpx">
							<!-- <view :class="item.State==1?'text-gray':'text-tea'" class=" text-lg">
								{{item.StorePackage.Price}}元
							</view>
							<view :class="item.State==1?'text-gray':''" style="text-decoration: line-through; "
								class="text-sm">
								原价：{{item.StorePackage.OrginPrice}}元</view> -->
							<!-- <button v-if="item.State==0" class="margin-top-lg cu-btn bg-tea radius sm"
								@click="gotoUse(item.StoreId)">去使用</button>
							<view v-else class="text-gray  text-bold margin-top-sm">已消费</view> -->
						</view>
					</view>
					<u-line dashed margin="20rpx 0 20rpx 0"></u-line>
					<!-- <view class="text-sm text-gray">{{canUseTime(item.StorePackage)}}</view> -->
				</view>
			</view>

		</view>
		<!-- <view v-show="currentIndex==1">

		</view> -->
		<!-- <exchangepackage v-show="currentIndex==1"></exchangepackage> -->
		<view v-show="currentIndex==1" class="centerBox">
			<view class="flex justify-center" style="width: 100%;">
				<!-- <view>
					<image src="http://n298651t63.zicp.vip:9001/img/%E7%BE%8E%E5%9B%A2.png"
						style="width: 120rpx; height: 120rpx;border-radius: 120rpx;z-index: 1;left: 30rpx;" mode="aspectFit">
					</image>
					<image src="http://n298651t63.zicp.vip:9001/img/%E5%A4%A7%E4%BC%97%E7%82%B9%E8%AF%84.png"
						style="width: 120rpx; height: 120rpx;border-radius: 120rpx;left: -30rpx;"
						mode="aspectFit"></image>
				</view> -->
			</view>
			<view class="text-black text-bold margin-top-lg">
				当前门店{{storeName}}
			</view>
			<view class="text-black text-bold margin-top-lg">
				抖音自助验券
			</view>
			<view class="flex align-center justify-center margin-top-lg">
				<input v-model="code" style="height: 80rpx;width: 360rpx;" placeholder="点击输入卡券兑换码" />
				<text class="cuIcon-scan text-gray" style="font-size: 40rpx;" @click="scanCode"></text>
			</view>
			<view class="centerLine"></view>
			<button class="cu-btn centerButton bg-tea margin-top-lg" @click="exchange">兑换</button>
		</view>
	</view>
</template>

<script>
	import exchangepackage from '@/components/exchangepackage/exchangepackage.vue'
	export default {
		components: {
			exchangepackage
		},
		data() {
			return {
				currentIndex: 0,
				tablist: [{
					name: '卡券'
				}, {
					name: '兑换'
				}],
				code:'',
				storeName:'',
				packagelist: [],
			}
		},
		onLoad(params) {
			if (params.index) {
				this.currentIndex = params.index;
			}
			this.getMyPackage();
		},
		onShow() {
			this.storeName = uni.getStorageSync('storeName');
			this.storeId = uni.getStorageSync('storeId');
			
		},
		methods: {
			//标签切换
			tabsChange(e) {
				if (e.index==0){
					this.getMyPackage();
				};
				this.currentIndex = e.index;

			},
			scanCode() {
				//调起摄像头拍摄条形码
				let that = this;
				uni.scanCode({
					onlyFromCamera: false,
					// scanType: ['barCode', 'qrCode'],
					success: function(res) {
						that.code = res.result;
					}
				})
			},
			//兑换券
			exchange() {
				uni.showLoading({title: '核销中，请稍后'});
				uni.$u.http.post('/rest/douyin/verfy', {
					codeUrl: this.code,
					mchid: this.storeId.toString()
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.resultMsg
					})
					// 核销成功
					if(res.resultMsg=='核销成功'){
						this.currentIndex=0
					};
				});
			},
			//查询我的全部卡券，包含已消费
			getMyPackage() {
				uni.$u.http.post('/rest/douyin/avaiCoupons').then(res => {
					this.packagelist = res.data;
				});
			},
			CanUseRoom(item) {
				return item.RoomRange.map((x) => {
					return x.roomName
				}).join('、');
			},
			canUseTime(item) {
				//该卡券适用于周一、二、三、四、五、六 22:00-06:00可用
				let day = '该卡券适用于周' +
					item.WeekList.map((x) => {
						return x.name
					}).join('、');
				day += (item.CanUseTime ? ' ' + item.CanUseTime : ' 全天通用');
				return day;
			},
			gotoUse(storeId) {
				uni.setStorageSync('storeid', storeId);
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style>
	.centerLine {
		background: #eee;
		width: 440rpx;
		height: 2rpx;
	}
	
	.centerButton {
		width: 440rpx;
	}
	
	.centerBox {
		margin-top: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>
